<template>
  <el-dialog v-if="visible" :title="info.title" append-to-body :visible.sync="visible" center width="1080px" :before-close="handleCancel">
    <el-form ref="formDate" label-suffix=":" label-width="100px" :rules="rules" :model="form">
      <el-row>
        <el-col :span="10">
          <el-form-item label="项目名称" prop="pro" style="width: 100%">
            <ProSelectObject :id="form.pro_id" v-model="form.pro" />
          </el-form-item>
        </el-col>
        <el-col :span="10" class="h30" />
        <el-col v-if="info.type === 'add'" :span="4">
          <InventorysSelect :get-data="handleAdd" />
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark" style="width: 52%">
            <el-input v-model="form.remark" type="textarea" :rows="1" size="small" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="title">
          <el-row>
            <el-col :span="20">物料详情</el-col>
          </el-row>
        </el-col>
        <el-form-item label-width="0" class="pl5" prop="materials" style="width: 100%" />
        <el-col :span="24">
          <el-table class="search-table" :data="list" border fit highlight-current-row style="width: 100%;">
            <el-table-column label="序号" align="center" width="56px">
              <template slot-scope="{$index}">
                {{ $index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="品名" width="260px" prop="name" />
            <el-table-column label="单价" align="center" width="120px">
              <template slot-scope="{row}">
                <el-input v-model="row.price" size="mini" clearable />
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" width="180px">
              <template slot-scope="{row}">
                <el-input-number v-model="row.total" size="mini" :min="1" :step="1" />
              </template>
            </el-table-column>
            <el-table-column label="规格型号" width="120px" prop="sku" />
            <el-table-column label="参数" width="260px" prop="parameter" />
            <el-table-column label="品牌" width="140px" prop="brand" />
            <el-table-column label="单位" width="140px" prop="unit" />
            <el-table-column label="备注" min-width="260px" prop="remark" />
            <el-table-column v-if="info.type === 'add'" fixed="right" label="操作" align="center" width="100px">
              <template slot-scope="{row,$index}">
                <el-button size="mini" type="danger" @click="handleDeleteMat(row,$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="fr mt10">
            <el-button size="small" @click="handleCancel()">取 消</el-button>
            <el-button v-if="info.type === 'add'" type="primary" size="small" @click="handleBefore()">保 存</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import ProSelectObject from '@/myComponents/ProSelectObject'
import InventorysSelect from '@/myComponents/InventorysSelect'
import { addInventoryEX, queryInventoryEXInfos } from '@/api/material/inventoryex'
import { purInfos } from '@/api/purchase/purchase'
import form from '@/utils/form'

export default {
  components: { ProSelectObject, InventorysSelect },
  extends: form,
  props: {
    reqAdd: {
      default: addInventoryEX,
      type: Function
    }
  },
  data() {
    const vnull = (rule, value, callback) => {
      if (this.materials.length === 0) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    }
    return {
      rules: {
        pro: [{ required: true, trigger: 'blur', message: '项目不可为空' }],
        materials: [{ required: true, trigger: 'blur', message: '请添加物料信息', validator: vnull }]
      },
      materials: [],
      list: []
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.$set(this, 'form', {})
        this.$set(this, 'list', [])
        this.$set(this, 'form', this.info.edit)
        this.$set(this.form, 'pro', {})
        if (this.info.type === 'view') {
          this.queryInventoryEXInfos()
        }
      }
    },
    getData: {
      type: Function,
      default: function() {}
    }
  },
  mounted() {
  },
  methods: {
    handleAdd(e) {
      let i = 0
      const kj = {}
      for (i = 0; i < this.list.length; i++) {
        kj['' + this.list[i].id] = '-'
      }
      for (i = 0; i < e.length; i++) {
        if (!kj['' + e[i].id]) this.list.push(e[i])
      }
    },
    queryInventoryEXInfos() {
      queryInventoryEXInfos({ pur_id: this.form.id }).then(response => {
        this.list = response.list
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    handleDeleteMat(row, index) {
      this.list.splice(index, 1)
    },
    handleBefore() {
      if (this.list) {
        const list = this.list
        const data = []
        list.forEach(item => {
          try {
            const total = parseInt(item.total)
            const price = parseFloat(item.price)
            if (total > 0 && price > 0) {
              const o = {}
              o.lmi_id = item.id
              o.price = price
              o.total = total
              data.push(o)
            }
          } catch (error) {
          }
        })
        this.materials = data
        this.form.pro_id = this.form.pro.key
        this.form.infos = JSON.stringify(this.materials)
        this.handleEdit()
      }
    }
  }
}
</script>

<style scoped>
.title{
  height: 34px;
  line-height: 34px;
  padding-left: 6px;
  font-size: 14px;
  font-weight: 600;
}
.mat-title{
  float: left;
  width: 30%;
  overflow: hidden;
  padding: 5px 10px;
  text-align: right;
  font-weight: bolder;
}
.mat-content{
  float: right;
  width: 70%;
  overflow: hidden;
  padding: 5px 10px;
}
</style>
